<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing=0px border="1px" width="300px">
        <thead>
            <th>姓名</th>
            <th>性别</th>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '李昊哲',
        gender: 1
    }, {
        name: '刘晓兰',
        gender: 0
    }, {
        name: 'phoenix',
        gender: 1
    }, {
        name: '小兰兰',
        gender: 0
    }, ];
    let tbody = window.document.querySelector('#content');
    let htmlText = '';

    for (let index = 0; index < data.length; index++) {
        const person = data[index];
        htmlText += "<tr>"
        htmlText += "<td>" + person.name + "</td>"
        htmlText += "<td>" + (person.gender == 1 ? '俊男' : '靓女') + "</td>"
        htmlText += "</tr>"
        tbody.innerHTML = htmlText;
    }
</script>